<template>
  <div class="container" v-if="$route.path === '/system/user-management'">
    <!--  头部区域-->
    <div class="header">
      <div class="left">
        <el-form :inline="true" :model="searchForm" ref="resetForm">
          <el-form-item label="用户名称" prop="keyword">
            <el-input
              placeholder="请输入用户名"
              style="width: 120px"
              size="small"
              v-model="searchForm.keyword"
            ></el-input
          ></el-form-item>
          <el-form-item label="状态" prop="selectValue">
            <el-select
              v-model="searchForm.selectValue"
              placeholder="请选择"
              size="small"
              style="width: 120px"
            >
              <el-option
                v-for="item in selectOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-form-item
          ><TsButton
            perms="users:page:get"
            label="搜索"
            type="primary"
            size="small"
            icon="el-icon-search"
            @click="search"
          >
          </TsButton>
          <el-button size="small" icon="el-icon-refresh-right" @click="reset"
            >重置</el-button
          ></el-form-item
        >
      </div>
      <div class="right c-m-t-5">
        <TsButton
          label="新增"
          perms="users:post"
          type="primary"
          size="small"
          @click="edit"
        ></TsButton>
        <TsButton
          perms="users:delete"
          label="删除"
          type="danger"
          size="small"
          @click="selectDel"
          >删除</TsButton
        >
        <TsButton
          perms="users:$id:enabled:put"
          label="启用"
          type="primary"
          size="small"
          @click="start"
        ></TsButton>
        <TsButton
          perms="users:$id:enabled:put"
          label="停用"
          type="danger"
          size="small"
          @click="stop"
        ></TsButton>
      </div>
    </div>
    <!--  表格区域-->
    <div class="table" style="height: calc(100% - 175px); overflow-y: auto">
      <el-table
        :header-cell-style="{ background: '#FEF6F6' }"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50px"></el-table-column>
        <el-table-column label="头像">
          <template #default="scope">
            <el-image
              style="width: 28px; height: 28px; border-radius: 50%"
              :src="scope.row.icon"
              alt=""
            >
              <template #error>
                <div class="image-slot">
                  <img
                    src="https://www.mingxiaobang.cn/upload/admin/admin_user.png"
                    style="width: 28px; height: 28px; border-radius: 50%"
                  />
                </div>
              </template>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="nickname"
          label="用户名称"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="mobile" label="手机号"></el-table-column>
        <el-table-column prop="username" label="账号"></el-table-column>
        <el-table-column
          prop="createTime"
          label="注册时间"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="状态" prop="enabled">
          <template #default="scope">
            <el-tag
              size="small"
              :type="scope.row.enabled === false ? 'danger' : ''"
              >{{ scope.row.enabled == false ? "禁用" : "启用" }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="roles" label="用户角色">
          <template #default="scope">
            <el-tag
              style="margin: 5px 0"
              size="small"
              v-for="(item, index) in scope.row.roles"
              :key="index"
              >{{ item.name }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="deptMonitors[0].name"
          label="归属部门"
        ></el-table-column>
        <el-table-column
          prop="lastLoginTime"
          label="最后登录时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              icon="el-icon-edit"
              type="text"
              size="small"
              @click="edit(scope.row)"
              >编辑
            </el-button>
            <TsButton
              perms="users:delete"
              label="删除"
              style="color: #ff5d5d"
              icon="el-icon-delete"
              type="text"
              size="small"
              @click="del(scope.row.id)"
            >
            </TsButton>
            <el-button
              :style="{
                color: scope.row.status === false ? '#0074DF' : '#FF5D5D',
              }"
              icon="el-icon-switch-button"
              type="text"
              size="small"
              @click="status(scope.row)"
              >{{ scope.row.enabled === false ? "启用" : "禁用" }}
            </el-button>
            <TsButton
              perms="users:$id:auth:put"
              label="授权"
              icon="el-icon-coordinate"
              type="text"
              size="small"
              @click="authorize(scope.row)"
            >
            </TsButton>
            <TsButton
              perms="users:$id:password:reset:put"
              label="重置密码"
              icon="el-icon-refresh-right"
              type="text"
              size="small"
              @click="resetPas(scope.row.id)"
            >
            </TsButton>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      style="float: right; margin: 20px"
      @size-change="pageSizeChange"
      @current-change="pageCurrentChange"
      :current-page="pageNum"
      :page-size="pageSize"
      layout=" prev, pager, next"
      :total="totalNum"
      background
    >
    </el-pagination>
    <!--    新增编辑对话框-->
    <el-dialog
      v-model="addDialogVisible"
      :title="userId ? '编辑用户' : '新增用户'"
      width="40%"
      :before-close="handleClose"
    >
      <el-form
        :model="addForm"
        :rules="ruleForm"
        ref="formRef"
        label-width="100px"
        label-position="right"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名称" prop="nickname">
          <el-input
            v-model="addForm.nickname"
            placeholder="请输入用户名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input
            v-model="addForm.mobile"
            placeholder="请输入手机号码"
          ></el-input>
        </el-form-item>
        <el-form-item label="账号" prop="username">
          <el-input
            v-model="addForm.username"
            placeholder="请输入账号"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
          v-show="userId ? false : true"
        >
          <el-input
            :placeholder="userId ? '' : '请输入密码'"
            v-model="addForm.password"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="归属部门" prop="departments">
          <el-tag
            class="c-m-r-10"
            v-for="(item, index) in departments"
            :key="index"
            >{{ item.name }}</el-tag
          >
        </el-form-item>
        <el-form-item label="状态" prop="enabled">
          <el-radio-group v-model="addForm.enabled">
            <el-radio :label="true">启用</el-radio>
            <el-radio :label="false">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="头像">
          <el-upload
            action="/api/storages"
            accept=".jpeg,.png,.jpg,.bmp,.gif"
            list-type="picture-card"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :file-list="fileImgs"
            :headers="header"
            :on-exceed="handleOnExceed"
            :limit="1"
            name="multipartFile"
          >
            <i class="el-icon-plus"></i>
            <template #tip>
              <div class="el-upload__tip">
                <i class="el-icon-warning-outline"></i>
                <span class="c-m-l-5"
                  >图片支持JPG，Jpeg，Png，请上传10M以内的图片</span
                >
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submit">确定</el-button>
          <el-button @click="cancel">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <!--    状态对话框-->
    <el-dialog v-model="statusDialogVisible" title="提示" width="30%">
      <el-form ref="refForm">
        <span
          >您确定{{ dialogTitle === true ? "停用" : "启用" }}该用户么？</span
        >
        <el-input
          v-model="addForm.reason"
          class="c-m-t-10"
          type="textarea"
          placeholder="请输入停用的原因"
        >
        </el-input>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submitEnabled">确定</el-button>
          <el-button @click="statusDialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
  <router-view></router-view>
</template>

<script>
import userManagement from "@/composables/system/user-management";
import commonPageRepository from "@/composables/common-page-repository";
import { reactive } from "vue";
import Cookies from "js-cookie";
import TsButton from "../../../components/TsButton";
export default {
  components: { TsButton },
  setup() {
    const header = reactive({ Authorization: Cookies.get("token") });
    const {
      formRef,
      refForm,
      getUserData,
      submit,
      userId,
      getImgUrl,
      start,
      totalNum,
      submitEnabled,
      pageSize,
      pageNum,
      tableData,
      searchForm,
      resetPas,
      search,
      del,
      dialogTitle,
      authorize,
      multipleTable,
      stop,
      edit,
      addDialogVisible,
      addForm,
      selectDel,
      cancel,
      handleSelectionChange,
      ruleForm,
      status,
      statusDialogVisible,
      selectValue,
      selectOption,
      resetForm,
      reset,
      handleRemove,
      handleSuccess,
      fileImgs,
      departments,
      handleOnExceed,
      handleClose,
    } = userManagement();
    const { pageSizeChange, pageCurrentChange } = commonPageRepository(
      pageSize,
      pageNum,
      getUserData
    );
    return {
      handleClose,
      formRef,
      tableData,
      pageSize,
      selectDel,
      resetPas,
      userId,
      refForm,
      resetForm,
      reset,
      stop,
      multipleTable,
      start,
      search,
      submitEnabled,
      searchForm,
      pageSizeChange,
      pageCurrentChange,
      pageNum,
      submit,
      handleSelectionChange,
      del,
      authorize,
      dialogTitle,
      cancel,
      totalNum,
      edit,
      getImgUrl,
      getUserData,
      addDialogVisible,
      addForm,
      ruleForm,
      selectOption,
      status,
      statusDialogVisible,
      selectValue,
      header,
      handleRemove,
      handleSuccess,
      fileImgs,
      departments,
      handleOnExceed,
    };
  },
  name: "UserManagement",
};
</script>

<style scoped lang="scss">
.container {
  height: calc(100vh - 180px);
  border-radius: 6px;
  overflow: auto;
  opacity: 1;
  box-shadow: 0px 0px 16px rgba(96, 96, 96, 0.16);
  background: #ffffff;

  .header {
    padding: 20px;
    display: flex;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;
    }
  }

  .table {
    padding: 0 20px;
  }
}
</style>
